import React, {useState} from 'react';
import './index.styl';
import {cloneDeep} from 'lodash';
import {Row, Col, Empty} from 'antd';
import {useUpdateEffect} from 'ahooks';
import {roomMessageMap} from '~/page/liveMonitor/config.js';

// pm临时更改展示顺序
function exchangeOrders(array, index1, index2) {
    if (array.length > index1 && array.length > index2) {
        const temp1 = cloneDeep(array[index1]);
        const temp2 = cloneDeep(array[index2]);
        array[index1] = temp2;
        array[index2] = temp1;
        return array || [];
    }
    return [];
}

export default ({data, title}) => {
    const [values, setValues] = useState([]);
    const {dashBoardId, unitId} = roomMessageMap.get(title);

    useUpdateEffect(() => {
        const [card1UnitId, card2unitId] = unitId;
        if (data && data[dashBoardId] && data[dashBoardId][card1UnitId] && data[dashBoardId][card2unitId]) {
            const dashboard = data[dashBoardId];
            const {
                cardValues: cardValues1
            } = dashboard[card1UnitId];
            const {
                cardValues: cardValues2
            } = dashboard[card2unitId];
            const cardValues = cardValues1?.concat(cardValues2) || [];
            const exchangeArray = exchangeOrders(exchangeOrders(cardValues, 1, 3), 1, 2);
            setValues(exchangeArray);
        }
    }, [data, dashBoardId, unitId]);

    return (
        <div className="people-number">
            {
                values?.length > 0
                    ? (
                        <Row justify="space-between">
                            {
                                values?.map(item => (
                                    <Col span={11} key={item.name}>
                                        <div className="number">{item.value}</div>
                                        <div className="text">{item.name}</div>
                                    </Col>
                                ))
                            }
                        </Row>
                    )
                    : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            }

        </div>
    );
};
